<template>
  <div class="mui-content ">
    <!--<heade background='' title='活动查询' v-on:goBack="goBack($event)"></heade>-->
    <div class="activeTop"  id="activeTop" ref="elememt">
      <div class='nav'>
        <div class='nav-item' :class="clas1[0]" @click="selectAll(0)">全部
          <i class='line'></i>
        </div>
        <div class='nav-item' :class="clas1[1]" @click="selectAll(1)">可申报
          <i class='line line-med'></i>
        </div>
        <div  class='nav-item' :class="clas1[2]" @click="selectAll(2)" >已结束
          <i class='line'></i>
        </div>
      </div>
      <div class="search" >
        <input type="text" placeholder="请输入活动名称..." v-on:keyup.enter="submit" v-model="active" @blur="submit">
        <div class="mui-icon mui-icon-search" @click="submit"></div>
      </div>
      <div class="querySubject">

        <div class="subjectL   selectSubjects" style="padding-top: 10px;height: 26px" :class="selectSubjectClass">
          <div class="label"  v-for="(item,index) in subject" :key="index">
            <input type="checkbox" v-model="subject[index].checkedValue" @change="do_selectSubject(item,index)" style="width: 13px;height: 13px">
            <span v-text="item.name"></span>
          </div>
          <!--<label for=""> <input type="checkbox" > <span>jjij</span> </label>-->
        </div>
        <div class="subjectR">
          <div class="allSubject" @click="def_allSubject">
            <span :class="allSubject?'span':'dd'">全部</span>
          </div>
        </div>
      </div>
    </div>

    <div class="noResource" v-show="imgShow">
      <div><img src="../../assets/img/3aa41c17c34735172a543eed6289129c.png" alt=""></div>
      <p>暂无资源</p>
    </div>
    <div  class="contentWrapper" ref="contentWrap">
      <div class="contentWrapper1">
        <div class="search-wrapper" v-for="(item,index) in activeData" :key="index">
          <div class="titleContent">
            <div class="title">{{item.Name}}</div>
            <div class="state" v-if="!item.isCanWrite">已结束</div>
            <div class="state2" v-if="item.isCanWrite" @click="MyApply(activeData[index])">可申报</div>
            <img class="img" src="../../assets/img/person_img16.png" alt="" v-if="item.isCanWrite" @click="MyApply(activeData[index])">
            <div class="apply" @click="MyApply(activeData[index])" v-if="item.isCanWrite">申报</div>
          </div>
          <div class="listContent">
            <div class="listTitle">学段范围：</div><div class="right mui-text-right">{{item.SelectLearnStage}}</div>
          </div>
          <div class="listContent">
            <div class="listTitle">资源类型：</div><div class="right mui-text-right">{{item.ProjectType}}</div>
          </div>
          <div class="listContent">
            <div class="listTitle">学科范围：</div><div class="right mui-text-right">{{item.SelectSubjects}}</div>
          </div>
          <div class="listContent">
            <div class="listTitle">开始时间：</div><div class="right mui-text-right">{{item.StartDate}}</div>
          </div>
          <div class="listContent">
            <div class="listTitle">结束时间：</div><div class="right mui-text-right">{{item.EndDate}}</div>
          </div>
        </div>
        <div class="fresh" v-if="up" style="height: 50px;line-height: 50px;margin-top: 0px">
          <Loading v-if="showmeLoad"></Loading>
          <div v-if="!showmeLoad" class="mui-text-center" style="color: grey;line-height: 50px;height: 20px">没有更多...</div>
        </div>
      </div>
    </div>
    <div class="mui-bottom bottom">
      <Foot></Foot>
    </div>
    <Prompt
      title="错误"
      :msg=mistakeMsg
      confirm="确定"
      v-on:confirm1="confirm1($event)"
      v-if="mistake"
    >
    </Prompt>
  </div>

</template>
<script>
  import heade from '@components/common/head2.vue'
  import Foot from '@components/common/Foot.vue'
  import Prompt from '@components/common/Prompt.vue'
  import BScroll from 'better-scroll'
  import Loading from '@components/common/Loading'
  export default {
    components: {
      heade,
      Foot,
      Prompt,
      Loading
    },
    data() {
      return {
        UserId: '',
        mistake: false,
        clas1: [],
        activeData: [],
        contentScroll: {},
        active: '',
        imgShow: false,
        mistakeMsg: '',
        FW: 0,
        Page: 1,//当前页面
        Pages: null,//总页数
        showmeLoad: true,
        up: false,
        scroll: {},
        isQuery: '0',
        countChek: 1,
        subject: [],
        subjects: {},
        allSubject: false,
        selectSubjectClass: '',
        keywordQury: '',
        satrY:-1000
      }

    },
    created() {
      let me = this;
      if (sessionStorage.getItem('FW')) {
        this.FW = sessionStorage.getItem('FW')
      }
      this.$nextTick(() => {
        this.clas1 = [];
        for (let i = 0; i < 3; i++) {
          if (i == this.FW) {
            this.clas1.push('active')
          } else {
            this.clas1.push(i)
          }
        }
      })
      console.log(this.clas1)
      me.Page = 1
      me.clas1 = ['active'];
      this.def_query()
      me.$Global.zcServer.Post({
        IsNeedLogin: 'false',
        Paras: {
          Name: 'Vue_CustomerResource',
          Action: 'Ext_getProjectResoureSubject',
          Data: {
            name: '可申报'
          }
        },
        Callback: me.cb_Ext_getProjectResoureSubject,
        Scope: me
      });
    },
    methods: {
      confirm1() {
        this.mistake = false
        // this.$router.push('/Login')
      },
      goBack() {
        this.$router.push('/Index')
      },
      def_allSubject() {
        this.allSubject = !this.allSubject
        if (this.allSubject == true) {
          this.selectSubjectClass = 'selectSubject2'
        } else {
          this.selectSubjectClass = 'selectSubject'
        }
        this.$nextTick(() => {
          let activeTop = document.getElementById("activeTop")
          let height = activeTop.clientHeight
          this.$refs.contentWrap.style.top = (height + 5) + 'px'
          console.log(height)
          console.log(this.$refs.contentWrap)
        })
      },
      do_selectSubject(item,index) {

        let qury = [];
        let me = this
        console.log(item.checkedValue)
        // me.$nextTick(() => {
          me.subject.forEach((item1) => {
            if (item1.checkedValue) {
              qury.push(item1.name)
            }
          })
          me.keywordQury = '';
          qury.forEach((item, index) => {
            if (index == 0) {
              me.keywordQury = item
            } else {
              me.keywordQury = item + ',' + me.keywordQury
            }
          });
          console.log(me.keywordQury);
          me.def_query()
        // })
      },
      def_query() {
        let me = this
        me.$Global.zcServer.Post({
          IsNeedLogin: 'false',
          Paras: {
            UserId: me.$Global.UserId,
            Name: 'Vue_CourseResource',
            Action: 'Ext_ActivityPage_RS',
            Data: {
              "Title": me.active,
              "Page": me.Page,
              "ResourceModel": '',//查询优秀论文  优秀课列等
              "FW": me.FW,//0代表全部 1代表可以申报，2代表结束
              "PageNum": 20,
              "Subject": me.keywordQury
            }
          },
          Callback: me.cb_active,
          Scope: me
        });
      },
      selectAll(index) {
        sessionStorage.setItem('FW', index)
        this.FW = index
        this.clas1 = [];
        for (let i = 0; i < 3; i++) {
          if (i == index) {
            this.clas1.push('active')
          } else {
            this.clas1.push(index)
          }
        }
        this.Page = 1
        this.FW = index
        this.def_query()
      },

      MyApply(index) {
        console.log(index)
        let data = {};
        data.Name = index.Name;
        data.SN = index.SN;
        data.TS = index.TS;
        data.Id = index.Id;
        data.ProjectType = index.ProjectType;
        data.isCanWrite = index.isCanWrite;
        sessionStorage.setItem("ApplySN", JSON.stringify(data));
        this.$router.push('/PaperApply')

      },
      /*查询申报关键字*/
      submit() {
        let me = this;
        me.Page = 1
        me.isQuery = 1
        this.def_query()
      },
      /*回調函數*/
      cb_Ext_getProjectResoureSubject(resJson, scope) {

        try {
          console.log(resJson)
          if (this.countChek == 1) {
            this.subject = []
            for (let i = 0; i < resJson.data.length; i++) {
              // const list=resJson.data[key]
              this.subjects = {};
              this.subjects.name = resJson.data[i];
              this.subjects.checkedValue = false;
              //this.subjects.addInputClasses = 'input2';
              this.subject.push(this.subjects)
            }
          }
          console.log('所有科目')
          console.log(this.subject)
          this.countChek++;
        } catch (e) {

        }
      },
      /*进入页面查询全部活动*/
      cb_active(resJson, req) {

        if (resJson.success == false) {
          this.mistake = true
          this.mistakeMsg = resJson.msg

        }else {
          console.log(resJson)
          if (resJson.data.Data.length == 0) {

            this.activeData = resJson.data.Data;
            this.imgShow = true;
            this.up=false;

          } else {
            this.Pages = resJson.data.Pages

            this.imgShow = false;
            /*合并数组*/
            if(this.Page<=resJson.data.Pages){
              if(this.Page==1){
                this.activeData=resJson.data.Data
              }else {
                this.activeData.push.apply(this.activeData,resJson.data.Data);
                this.contentScroll.refresh();
              }
            }
          }
          console.log('合并后资源');
          console.log(this.activeData);
        }

      },
      /*关键字查询*/
      cb_query(resJson, req) {
        console.log('关键字查询');
        console.log(resJson);
        if (resJson.data.Data.length == 0) {
          this.activeData = resJson.data.Data;
          this.imgShow = true;
        } else {
          if (this.isQuery == 1) {
            this.activeData = resJson.data.Data;
            this.isQuery = 0
          } else {
            if (this.Page <= resJson.data.Pages) {

              this.activeData.push.apply(this.activeData, resJson.data.Data);
              this.imgShow = false;


            }
          }
        }
      },
      /*上拉加载更多*/
      BS() {
        this.satrY=this.contentScroll.startY
        this.$nextTick(() => {
          if (!this.$refs.contentWrap) {
            return;
          }else {
            // better-scroll的初始化
            this.contentScroll = new BScroll(this.$refs.contentWrap, {
              probeType: 3,
              click: true,
              scrollX: false,
              bounce: false
              // startY:this.satrY
            });
          }


          // console.log('总高度');
          console.log(this.contentScroll.maxScrollY);
          console.log(this.contentScroll.y);
          this.contentScroll.on('scroll', pos => {
            // console.log("判断下拉的高度");
            // console.log(pos.y);
            //如果上拉超过30px 就显示下拉刷新的文字
            if (pos.y < this.contentScroll.maxScrollY +50&& pos.y!=0) {
              this.up = true
            } else {
              this.up = false
            }
          });
          //touchEnd 通过这个方法来监听上拉
          this.contentScroll.on('touchEnd', pos => {
            // 下拉动作

            if (pos.y < this.contentScroll.maxScrollY +100) {

              this.Page++
              if (this.Page > this.Pages) {
                this.Page = this.Pages
                this.showmeLoad = false
                return
              }

              this.contentScroll.refresh();
              console.log('上啦加载成功');
              let me = this;
              me.def_query()
              me.up = false;

            }
            // if(this.scroll.maxScrollY > pos.y + 10) {
            console.log('加载更多');
            // console.log(this.scroll.maxScrollY);
            //使用refresh 方法 来更新scroll  解决无法滚动的问题
            this.contentScroll.refresh();
            // }
            //console.log(this.scroll.maxScrollY + '总距离----下拉的距离' + pos.y);
          });
          console.log(this.contentScroll.maxScrollY);
        })
      }
    },
    mounted() {
      this.showme = false;
      let me=this;
      setTimeout(() => {
        me.BS();
      }, 20);

    },

    watch: {
      // 监听数据的变化，延时20时间后调用refresh方法重新计算，保证滚动效果正常
      data() {
        alert(55)
        let me=this;
        // setTimeout(() => {
          me.BS();
          me.contentScroll.refresh();
        // }, 20);
      }
    }
  }
</script>
<style scoped>
  @font-face {
    font-family: 'iconfont'; /* project id 1144889 */
    src: url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.eot');
    src: url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.woff2') format('woff2'), url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.woff') format('woff'), url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.ttf') format('truetype'), url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.svg#iconfont') format('svg');
  }
  .mui-content>.bottom{
    width: 100%;
    position: absolute;
    display: inline-block;
    bottom: 0px;
  }
  .mui-content .search{
    width: 100%;
    position: relative;
  }
  .mui-content .search input{
    width: 100%;
    border: none;
    outline: none;
    margin-bottom: 0px;
  }
  .mui-content .search input::-webkit-input-placeholder {
    font-size: 13px;
    text-align: left;
  }
  /*滚动*/
  .mui-content .contentWrapper{
    position: absolute;
    top: 110px;
    /*top:600px;*/
    bottom: 56px;
    width: 100%;
    overflow: hidden;
  }
  .mui-content .search .mui-icon{
    position: absolute;
    width: 25px;
    height: 25px;
    right: 10px;
    top: 8px;
    color:rgba(93, 194, 240, 1);
  }
  .mui-content .search-wrapper{
    width: 100%;
    padding: 0px 0px 5px 0px;
    /*position: relative;*/
    margin-top: 8px;
  }
  .mui-content .search-wrapper .titleContent{
    width: 100%;
    height: 50px;
    padding-left: 2%;
    background-color: white;
    border-bottom: 1px solid darkgray;
  }
  .mui-content .search-wrapper .titleContent .title,.state,.state2{
    float:left;
    display: inline-block;
    height: 50px;
    line-height: 50px;

  }
  .mui-content .search-wrapper .titleContent .title{
    font-size: 1rem;
    padding-right: 20px;
    max-width: 65%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .mui-content .search-wrapper .titleContent .state{
    padding: 0.2rem 0.5rem;
    background-color: rgba(252, 238, 215,0.5);
    color: rgba(252, 162, 103, 1);
    /*color: white;*/
    height: 22px;
    line-height: 18px;
    margin-top: 14px;
    border-radius: 2px;
    font-size: 12px;
  }

  .mui-content .search-wrapper .titleContent .state2{
    padding: 0.2rem 0.5rem;
    background-color:rgba(65,186,254,.4);
    color:  #2ba9f0;
    height: 22px;
    line-height: 18px;
    margin-top: 14px;
    border-radius: 2px;
    font-size: 12px;
  }
  .mui-content .search-wrapper .titleContent .apply,.img {
    float: right;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    color:rgba(93, 194, 240, 1);
    padding-right: 5px;
  }
  .apply{
    position: relative !important;
    top: 1px !important;
  }
  .mui-content .search-wrapper .titleContent .img{
    width: 14px;
    height: 14px;
    margin-top: 15px;
    transform: rotate(270deg);
    margin-right: 20px;
  }
  .mui-content .search-wrapper .listContent{
    font-size: 0.9rem;
    color: #8f8f94;
    width: 100%;
    line-height: 100%;
    padding: 8px 2%;
    background-color: white;
    display: flex;
  }
  .mui-content .search-wrapper .listContent .listTitle{
    width: 30%;
  }
  .mui-content .search-wrapper .listContent .right{
   width: 70%;
  }
  .nav{
    position: relative;
    display:flex;
    height:40px;
    line-height: 40px;
    border-bottom:1px solid rgba(93, 194, 240, 0.3);
    color: rgba(93, 194, 240, 1);
    border-right: none;

  }
  .nav-item{
    flex:1;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    border-right: 1px solid rgba(93, 194, 240, 0.3);
  }
  .nav-item:last-child{
    border-right:none
  }
  /* 选中的样式 */
  .nav .active{
    color:white;
    background-color:  rgba(93, 194, 240, 1);
    /*border-bottom:1px solid rgb(70,180,250);*/
  }
  /*查询失败提示*/
  .mui-content .noResource{
    width: 100%;
    display: flex;
    align-items:center ;
    justify-content: center;
    flex-direction: column
  }
  .mui-content .noResource img{
    height: 150px;
    width: 150px;

  }
.querySubject{
  display: flex;

}
  .querySubject .subjectL{
    flex: 1;
  }
  .querySubject .subjectL .label{
    display: inline-block;
    padding-left: 10px;
    width: 48.9%;
    align-items: center;
  }
  .querySubject .subjectL .label{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
  }
  .querySubject .subjectL .label span{
    position: relative;
    top: -2px;
  }
  .querySubject .subjectR{
    flex:0 0 60px;
  }

  .allSubject{
    position: relative;
  }
  .allSubject span{
    position: absolute;
    display: inline-block;
    width: 60px;
    line-height: 30px;
    height: 30px;
    /*margin-left: 30px;*/
    cursor: pointer;
    font-size: 12px;
  }
  .allSubject span:before{
    font-family: "iconfont" ;
    content: "\e600";
    margin-right: 5px;
    font-size: 14px;
    margin-top: 2px;
  }
  .allSubject .span:before{
    font-family: "iconfont" ;
    content: "\e604";
    margin-right: 5px;
    font-size: 14px;
    margin-top: 2px;
  }
  .selectSubjects{
    height: 30px;
    overflow: hidden;
  }
  /*.selectSubjects2{*/
  /*height: 300px !important;*/
  /*overflow: hidden;*/
  /*}*/
.selectSubject2{
    height: auto !important;
    overflow: hidden;
    /*border: 1px solid red;*/
  }
</style>
